<template>
    <common-field v-bind="$attrs">
        <el-radio-group v-model="currentLevel" class="radio-group">
            <el-radio
                :key="level"
                :label="level"
                v-for="(lable, level) in levelList"
            >
                {{ lable }}
            </el-radio>
        </el-radio-group>
    </common-field>
</template>

<script lang="ts">
import {
  Options, Vue, Emit, Prop, Watch,
} from 'vue-property-decorator';
import { ElRadioGroup, ElRadio } from 'element-plus';
import CommonField from './common-field.vue';

@Options({
  components: {
    ElRadioGroup,
    ElRadio,
    CommonField,
  },
})
export default class CorrectionSelector extends Vue {
    @Prop({
      type: String,
    })
    targetLevel!:string;

    private currentLevel = this.targetLevel || 'Q';

    private get levelList() {
      return {
        H: '30%',
        Q: '25%',
        M: '15%',
        L: '7%',
      };
    }

    @Emit('update:targetLevel')
    @Watch('currentLevel', { immediate: true })
    private changeCurrentLevel(level: string): string {
      return level;
    }
}
</script>

<style lang='less' scoped>
.radio-group {
    :deep(.el-radio) {
        margin-right: 5px;
        &:last-child {
            margin-right: 0;
        }
        .el-radio__inner {
            font-size: 11px;
        }
        .el-radio__label{
            padding-left: 2px;
            font-size: 11px;
            color: #898989;
        }
    }
}
</style>
